<template>
  <div id="app">
    <!--<nprogress-container></nprogress-container>-->
    <mk-loading v-if="loading"></mk-loading>

    <el-container class="main-container" v-if="!loading">
      <el-aside :width="asideWidth + 'px'" :class="{'hover-show': isHoverShow}"
                @mouseover.native="showMenu" @mouseleave.native="hideMenu">
        <div class="logo">
          <img src="./assets/Logo.png" height="44" width="39" alt=""/>
          <span class="logo-title">世外票务云平台</span>
        </div>
        <mk-menu :aside-width="asideWidth"></mk-menu>
      </el-aside>

      <el-main :class="{'add-padding': isHoverShow}" id="mainContent">
        <router-view></router-view>
      </el-main>

    </el-container>

  </div>
</template>

<script>
  import MkMenu from './components/MkMenu.vue'
//  import NprogressContainer from 'vue-nprogress/src/NprogressContainer'
  import MkLoading from './views/MkLoading.vue'
  import {mapState} from 'vuex'

  export default {
    name: 'app',
    components: {
      MkMenu, MkLoading
    },
    computed: mapState({
      resources: state => state.staff.loginedStaff.resources,
      bodyWidth: state => state.global.bodyWidth,
      bodyHeight: state => state.global.bodyHeight
    }),
    data () {
      return {
        loading: true,
        asideWidth: 60,
        isHoverShow: false,
        timer: null
      }
    },
    watch: {
      bodyWidth: function (value) {
        if (value < 1680) {
          this.asideWidth = 60;
        } else {
          this.asideWidth = 260;
        }
      }
    },
    mounted(){
      this.$store.dispatch('loadLoginedStaff').then(() => {
        this.loading = false;
        this.generateResourceRouters(this.resources);
      });

      this.$store.dispatch('loadBodySize').then(() => {
        if (this.bodyWidth < 1680) {
          this.asideWidth = 60;
        } else {
          this.asideWidth = 260;
        }
      });
      if (window.addEventListener) {
        window.addEventListener('resize', () => {
          this.$store.dispatch('loadBodySize');
        });
      } else {
        window.attachEvent('onresize', () => {
          this.$store.dispatch('loadBodySize');
        })
      }

    },
    methods: {
      generateResourceRouters(resources){
        let routers = []
        for (let i = 0, l = resources.length; i < l; i++) {
          let res = resources[i];
          if (res.router && res.view) {
            routers.push(this.getRouter(res))
          }
          if (!res.leaf) {
            this.generateResourceRouters(res.children)
          }
        }
        this.$router.addRoutes(routers)
        this.$router.push('/')
      },

      getRouter(resource){
        return {
          path: resource.router,
          component:  resolve => require(['./views/' + resource.view], resolve)
//          component: require('./views/' + resource.view)
          // meta: {
          //   icon: resource.icon
          // },
        };
      },
      showMenu() {
        if (this.bodyWidth < 1680 && this.asideWidth == 60) {
          clearTimeout(this.timer);
          this.asideWidth = 260;
          this.isHoverShow = true;
        }
      },

      hideMenu() {
        if (this.bodyWidth < 1680 && this.asideWidth == 260) {
          this.asideWidth = 60;
          this.timer = setTimeout(() => {
            this.isHoverShow = false;
          }, 300);
        }
      }
    }
  }
</script>

<style lang="less">
  @import './assets/style/publicStyle.less';

  html, body, #app, .main-container {
    height: 100%;
    overflow:hidden;

  }

  .main-container {
    min-width: 1280px;
    .el-aside {
      background-color: @menuBackColor1;
      height: 100%;
      transition: all .3s;
      overflow-x: hidden;
    }
    .el-header {
      .my-box-shadow(0 1px 4px rgba(0, 0, 0, 0.10));
      padding: 0;
    }
    .el-main {
      padding: 0;
      background-color: @borderColor;
    }
    .logo {
      margin-bottom: 20px;
      padding: 15px 10px 7px 10px;
      position: relative;
      .logo-title {
        padding-left: 10px;
        width: 150px;
        font-size: 20px;
        color: @primaryColor;
        line-height: 80px;
        white-space: nowrap;
        position: absolute;
        top: 0;
        left: 60px;
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        -ms-transition: all 0.3s;
        transition: all 0.3s;
      }
    }
    .hover-show {
      position: fixed;
      z-index: 3000;
    }
    .add-padding {
      padding-left: 60px;
    }
  }

  .nprogress-container {
    position: fixed !important;
    width: 100%;
    height: 50px;
    z-index: 2048;
    pointer-events: none;

    #nprogress {
      .bar {
        background: #FFA20A;
      }
      .peg {
        box-shadow: 0 0 10px #FFA20A, 0 0 5px #FFA20A;
      }
      .spinner-icon {
        border-top-color: #FFA20A;
        border-left-color: #FFA20A;
      }
    }
  }


</style>
